<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>preserve-3d | web前端</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="舞台层 景深层 perspective: 1600px; 形变中心点perspective-origin: 0px 0px; 形变中心点transform-origin: center center; 3d中心层就是围绕运动的层下面用几个例子来介绍3d动画 例1正方体代码&amp;lt;!DOCTYPE html&amp;gt;   &amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt; &amp;">
<meta property="og:type" content="article">
<meta property="og:title" content="preserve-3d">
<meta property="og:url" content="http://yoursite.com/2017/09/13/preserve-3d/index.html">
<meta property="og:site_name" content="web前端">
<meta property="og:description" content="舞台层 景深层 perspective: 1600px; 形变中心点perspective-origin: 0px 0px; 形变中心点transform-origin: center center; 3d中心层就是围绕运动的层下面用几个例子来介绍3d动画 例1正方体代码&amp;lt;!DOCTYPE html&amp;gt;   &amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt; &amp;">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/6863738-e37a47d7ed8de538.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:updated_time" content="2017-09-13T11:39:38.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="preserve-3d">
<meta name="twitter:description" content="舞台层 景深层 perspective: 1600px; 形变中心点perspective-origin: 0px 0px; 形变中心点transform-origin: center center; 3d中心层就是围绕运动的层下面用几个例子来介绍3d动画 例1正方体代码&amp;lt;!DOCTYPE html&amp;gt;   &amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt; &amp;">
<meta name="twitter:image" content="http://upload-images.jianshu.io/upload_images/6863738-e37a47d7ed8de538.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
  
    <link rel="alternate" href="/atom.xml" title="web前端" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
  

</head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">web前端</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">前端一些简单的基础</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="搜索"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-preserve-3d" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2017/09/13/preserve-3d/" class="article-date">
  <time datetime="2017-09-13T11:31:30.000Z" itemprop="datePublished">2017-09-13</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      preserve-3d
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="舞台层"><a href="#舞台层" class="headerlink" title="舞台层"></a>舞台层</h2><ul>
<li>景深层 perspective: 1600px;</li>
<li>形变中心点perspective-origin: 0px 0px;</li>
<li><p>形变中心点transform-origin: center center;</p>
<h2 id="3d中心层"><a href="#3d中心层" class="headerlink" title="3d中心层"></a>3d中心层</h2><p>就是围绕运动的层<br>下面用几个例子来介绍3d动画</p>
<h3 id="例1正方体"><a href="#例1正方体" class="headerlink" title="例1正方体"></a>例1正方体</h3><p>代码<br>&lt;!DOCTYPE html&gt;<br><html lang="en"><br>  <head></head></html></p>
<pre><code>&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;魔方&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
    body{
        background: black;
    }
    .pp{
        perspective: 1600px;

    }
    .wrap{
        transform-style: preserve-3d;
        transform: rotateX(30deg) rotateY(30deg);
        width: 200px;
        height: 200px;
        margin: 200px auto;
        position: relative;
        animation: donghua 2s linear infinite;

    }
    @keyframes donghua{
        0%{
            transform: rotateX(30deg) rotateY(30deg);
        }
        100%{
            transform: rotateX(360deg) rotateY(360deg);
        }
    }
    .wrap div{
        width: 210px;
        height: 210px;
        position: absolute;
        border: 1px solid yellow;
        background-color: black;
        box-shadow: 0 0 20px 2px yellow;
        color: white;
        font-size: 50px;
        text-align: center;
        line-height: 210px;
        text-shadow: 5px 5px 20px red ;
        opacity: 0.5;

    }
    .box1{
        background: red;
        transform: translateZ(105px);

    }
    .box2{
        background: orange;
        transform: translateZ(-105px);

    }
    .box3{
        background: blue;

        transform: translateX(105px)rotateY(90deg);
</code></pre></li>
</ul>
<pre><code>        }
        .box4{
            background: green;
            transform: translateX(-105px)rotateY(90deg);

        }
        .box5{
            background: cyan;
            transform: translateY(-105px)rotateX(90deg);

        }
        .box6{
            background: purple;
            transform: translateY(105px)rotateX(90deg);

        }
        .box7{
            background: red;
            transform: translateZ(35px);

        }
        .box8{
            background: orange;
            transform: translateZ(-35px);

        }
        .box9{
            background: blue;

            transform: translateX(35px)rotateY(90deg);


        }
        .box10{
            background: green;
            transform: translateX(-35px)rotateY(90deg);

        }
        .box11{
            background: cyan;
            transform: translateY(-35px)rotateX(90deg);

        }
        .box12{
            background: purple;
            transform: translateY(35px)rotateX(90deg);

        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;pp&quot;&gt;
        &lt;div class=&quot;wrap&quot;&gt;
            &lt;div class=&quot;box1&quot;&gt;1&lt;/div&gt;
            &lt;div class=&quot;box2&quot;&gt;2&lt;/div&gt;
            &lt;div class=&quot;box3&quot;&gt;3&lt;/div&gt;
            &lt;div class=&quot;box4&quot;&gt;4&lt;/div&gt;
            &lt;div class=&quot;box5&quot;&gt;5&lt;/div&gt;
            &lt;div class=&quot;box6&quot;&gt;6&lt;/div&gt;
            &lt;div class=&quot;box7&quot;&gt;7&lt;/div&gt;
            &lt;div class=&quot;box8&quot;&gt;8&lt;/div&gt;
            &lt;div class=&quot;box9&quot;&gt;9&lt;/div&gt;
            &lt;div class=&quot;box10&quot;&gt;10&lt;/div&gt;
            &lt;div class=&quot;box11&quot;&gt;11&lt;/div&gt;
            &lt;div class=&quot;box12&quot;&gt;12&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre><p><br>代码运行图</p>
<p><img src="http://upload-images.jianshu.io/upload_images/6863738-e37a47d7ed8de538.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="95F3F253-5A5E-467D-8F3D-25F893B95F41.png"></p>
<p>###例2 圈图<br>代码<br>&lt;!DOCTYPE html&gt;</p>
<p><html lang="en"></html></p>
<p><head><br>    <meta charset="UTF-8"><br>    <title>圈</title><br>    <style type="text/css"><br>        body{<br>            background: gray;<br>        }<br>        .box{<br>            perspective: 2600px;<br>        }<br>        .wrap{<br>            width: 200px;<br>            height: 200px;<br>            border: 1px solid red;<br>            transform-style: preserve-3d;<br>            position: relative;<br>            margin: 300px auto;<br>            transform: rotateX(-10deg)rotateY(10deg);<br>            animation: donghua 30s linear infinite;</p>
<pre><code>    }
    @keyframes donghua{
        0%{
            transform: rotateX(-10deg)rotateY(10deg);
        }
        100%{
            transform: rotateX(-10deg)rotateY(3600deg);
        }
    }
    .wrap:hover{
        animation-play-state: paused;
    }
    .wrap div{
        width: 200px;
        height: 200px;
        position: absolute;

    }
    .box1{
        background-image: url(&apos;1.jpg&apos;);
        background-repeat:no-repeat;
        background-size: cover;
        background-color: red;
        transform: rotateY(360deg)translateZ(500px);
    }
    .box2{
        background-image: url(&apos;2.jpg&apos;);
        background-repeat:no-repeat;
        background-size: cover;
        background-color: yellow;
        transform: rotateY(30deg)translateZ(500px);
    }
    .box3{
        background-image: url(&apos;3.jpg&apos;);
        background-repeat:no-repeat;
        background-size: cover;
        background-color: blue;
        transform: rotateY(60deg)translateZ(500px);
    }
    .box4{
        background-image: url(&apos;4.jpg&apos;);
        background-repeat:no-repeat;
        background-size: cover;
        background-color: green;
        transform: rotateY(90deg)translateZ(500px);
    }
    .box5{
        background-image: url(&apos;5.jpg&apos;);
        background-repeat:no-repeat;
        background-size: cover;
        background-color: cyan;
        transform: rotateY(120deg)translateZ(500px);
    }
    .box6{
        background-image: url(&apos;6.jpg&apos;);
        background-repeat:no-repeat;
        background-size: cover;
        background-color: purple;
        transform: rotateY(150deg)translateZ(500px);
    }
    .box7{
        background-image: url(&apos;7.jpg&apos;);
        background-repeat:no-repeat;
        background-size: cover;
        background-color: greenyellow;
        transform: rotateY(180deg)translateZ(500px);
    }
    .box8{
        background-image: url(&apos;8.jpg&apos;);
        background-repeat:no-repeat;
        background-size: cover;
        background-color: pink;
        transform: rotateY(210deg)translateZ(500px);
    }
    .box9{
        background-image: url(&apos;9.jpg&apos;);
        background-repeat:no-repeat;
        background-size: cover;
        background-color: orange;
        transform: rotateY(240deg)translateZ(500px);
    }
    .box10{
        background-image: url(&apos;10.jpg&apos;);
        background-repeat:no-repeat;
        background-size: cover;
        background-color: gray;
        transform: rotateY(270deg)translateZ(500px);
    }
    .box11{
        background-image: url(&apos;11.jpg&apos;);
        background-repeat:no-repeat;
        background-size: cover;
        background-color: seagreen;
        transform: rotateY(300deg)translateZ(500px);
    }
    .box12{
        background-image: url(&apos;12.jpg&apos;);
        background-repeat:no-repeat;
        background-size: cover;
        background-color:purple;
        transform: rotateY(330deg)translateZ(500px);
    }
&lt;/style&gt;
</code></pre><p></head></p>
<p><body><br>    <div class="box"><br>        <div class="wrap"><br>            <div class="box1"></div><br>            <div class="box2"></div><br>            <div class="box3"></div><br>            <div class="box4"></div><br>            <div class="box5"></div><br>            <div class="box6"></div><br>            <div class="box7"></div><br>            <div class="box8"></div><br>            <div class="box9"></div><br>            <div class="box10"></div><br>            <div class="box11"></div><br>            <div class="box12"></div><br>        </div><br>    </div><br></body><br></html><br>运行结果：</p>
<p><img src="http://upload-images.jianshu.io/upload_images/6863738-1776c43bab082433.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="EF3E7C93-A52A-4FCC-A075-4A18EDDD7ED4.png"></p>
<p>###例3 旋转链<br>代码如下：<br>&lt;!DOCTYPE html&gt;</p>
<p><html lang="en"></p>
<p><head><br>    <meta charset="UTF-8"><br>    <title>旋转多圈</title><br>    <style type="text/css"><br>        body{<br>            background: skyblue;</p>
<pre><code>    }
    .box{
        perspective: 1600px;
    }
    .wrap{
        width: 50px;
        height: 50px;
        border: 1px solid red;
        transform-style: preserve-3d;
        position: relative;
        margin: 400px auto;
        transform: rotateX(-10deg)rotateY(10deg);
        animation: donghua 10s linear infinite ;
        perspective-origin: 0 0 ;
    }
    .wrap:hover{
        animation-play-state: paused;
    }
    @keyframes donghua{
        0%{
            transform: rotateX(-10deg)rotateY(10deg);
        }
        100%{
            transform: rotateX(-10deg)rotateY(3600deg);
        }
    }
    .wrap div{
        width: 50px;
        height: 50px;
        position: absolute;
        font-size: 30px;
        color: white;
        line-height: 50px;
        text-align: center;
    }
    .box1{
        background-color: red;
        transform: rotateY(360deg)translateZ(200px);
    }
    .box2{
        background-color: yellow;
        transform: rotateY(30deg)translateZ(200px)translateY(20px);
    }
    .box3{
        background-color: blue;
        transform: rotateY(60deg)translateZ(200px)translateY(40px);
    }
    .box4{
        background-color: green;
        transform: rotateY(90deg)translateZ(200px)translateY(60px);
    }
    .box5{
        background-color: cyan;
        transform: rotateY(120deg)translateZ(200px)translateY(80px);
    }
    .box6{
        background-color: purple;
        transform: rotateY(150deg)translateZ(200px)translateY(100px);
    }
    .box7{
        background-color: greenyellow;
        transform: rotateY(180deg)translateZ(200px)translateY(120px);
    }
    .box8{
        background-color: pink;
        transform: rotateY(210deg)translateZ(200px)translateY(140px);
    }
    .box9{
        background-color: orange;
        transform: rotateY(240deg)translateZ(200px)translateY(160px);
    }
    .box10{
        background-color: gray;
        transform: rotateY(270deg)translateZ(200px)translateY(180px);
    }
    .box11{
        background-color: seagreen;
        transform: rotateY(300deg)translateZ(200px)translateY(200px);
    }
    .box12{
        background-color:purple;
        transform: rotateY(330deg)translateZ(200px)translateY(220px);
    }
    .box13{
        background-color: red;
        transform: rotateY(360deg)translateZ(200px)translateY(240px);
    }
    .box14{
        background-color: yellow;
        transform: rotateY(30deg)translateZ(200px)translateY(260px);
    }
    .box15{
        background-color: blue;
        transform: rotateY(60deg)translateZ(200px)translateY(280px);
    }
    .box16{
        background-color: green;
        transform: rotateY(90deg)translateZ(200px)translateY(300px);
    }
    .box17{
        background-color: cyan;
        transform: rotateY(120deg)translateZ(200px)translateY(320px);
    }
    .box18{
        background-color: purple;
        transform: rotateY(150deg)translateZ(200px)translateY(340px);
    }
    .box19{
        background-color: greenyellow;
        transform: rotateY(180deg)translateZ(200px)translateY(360px);
    }
    .box20{
        background-color: pink;
        transform: rotateY(210deg)translateZ(200px)translateY(-340px);
    }
    .box21{
        background-color: orange;
        transform: rotateY(240deg)translateZ(200px)translateY(-320px);
    }
    .box22{
        background-color: gray;
        transform: rotateY(270deg)translateZ(200px)translateY(-300px);
    }
    .box23{
        background-color: seagreen;
        transform: rotateY(300deg)translateZ(200px)translateY(-280px);
    }
    .box24{
        background-color:purple;
        transform: rotateY(330deg)translateZ(200px)translateY(-260px);
    }
    .box25{
        background-color: red;
        transform: rotateY(360deg)translateZ(200px)translateY(-240px);
    }
    .box26{
        background-color: yellow;
        transform: rotateY(30deg)translateZ(200px)translateY(-220px);
    }
    .box27{
        background-color: blue;
        transform: rotateY(60deg)translateZ(200px)translateY(-200px);
    }
    .box28{
        background-color: green;
        transform: rotateY(90deg)translateZ(200px)translateY(-180px);
    }
    .box29{
        background-color: cyan;
        transform: rotateY(120deg)translateZ(200px)translateY(-160px);
    }
    .box30{
        background-color: purple;
        transform: rotateY(150deg)translateZ(200px)translateY(-140px);
    }
    .box31{
        background-color: greenyellow;
        transform: rotateY(180deg)translateZ(200px)translateY(-120px);
    }
    .box32{
        background-color: pink;
        transform: rotateY(210deg)translateZ(200px)translateY(-100px);
    }
    .box33{
        background-color: orange;
        transform: rotateY(240deg)translateZ(200px)translateY(-80px);
    }
    .box34{
        background-color: gray;
        transform: rotateY(270deg)translateZ(200px)translateY(-60px);
    }
    .box35{
        background-color: seagreen;
        transform: rotateY(300deg)translateZ(200px)translateY(-40px);
    }
    .box36{
        background-color:purple;
        transform: rotateY(330deg)translateZ(200px)translateY(-20px);
    }
&lt;/style&gt;
</code></pre><p></head></p>
<p><body><br>    <div class="box"><br>        <div class="wrap"><br>            <div class="box1">活</div><br>            <div class="box2">半</div><br>            <div class="box3">步</div><br>            <div class="box4">你</div><br>            <div class="box5">若</div><br>            <div class="box6">平</div><br>            <div class="box7">凡</div><br>            <div class="box8">就</div><br>            <div class="box9">随</div><br>            <div class="box10">时</div><br>            <div class="box11">光</div><br>            <div class="box12">一</div><br>            <div class="box13">起</div><br>            <div class="box14">平</div><br>            <div class="box15">凡</div><br>            <div class="box16">各</div><br>            <div class="box17">自</div><br>            <div class="box18">安</div><br>            <div class="box19">好</div><br>            <div class="box20">你</div><br>            <div class="box21">若</div><br>            <div class="box22">幸</div><br>            <div class="box23">福</div><br>            <div class="box24">，</div><br>            <div class="box25">便</div><br>            <div class="box26">飞</div><br>            <div class="box27">到</div><br>            <div class="box28">天</div><br>            <div class="box29">边</div><br>            <div class="box30">不</div><br>            <div class="box31">再</div><br>            <div class="box32">踏</div><br>            <div class="box33">足</div><br>            <div class="box34">我</div><br>            <div class="box35">的</div><br>            <div class="box36">生</div><br>        </div><br>    </div><br></body><br></html><br>运行结果：</p>
<p><img src="http://upload-images.jianshu.io/upload_images/6863738-4f09442fbd50989c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="AFA823FB-566D-4175-93CA-24CC2EB5F4FC.png"><br>通过这些例子估计也弄懂了3d效果了，由于是动画，现又不支持动画截图，如果想看动画效果的话，自己复制代码可以看到。有关3d效果就到这里了。</p>
</style></head></p>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2017/09/13/preserve-3d/" data-id="cj7iyex2d00019fyrf6esn3wh" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
  
    <a href="/2017/09/12/移动端布局/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">移动端布局</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">归档</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/09/">九月 2017</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2017/09/13/preserve-3d/">preserve-3d</a>
          </li>
        
          <li>
            <a href="/2017/09/12/移动端布局/">移动端布局</a>
          </li>
        
          <li>
            <a href="/2017/09/11/第一天大富翁/">flex</a>
          </li>
        
          <li>
            <a href="/2017/09/11/hello-world/">Hello World</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2017 李可利<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>